<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>使用 JSON Server 构建数据接口</title>
</head>
<body>
<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.js"></script>
<script type="text/javascript">
// 参考地址
// https://www.yi-jy.com/2017/06/15/json-server/
var domain = 'http://localhost:3003';
// 查询
// $.ajax({ url : domain + '/news/1' }).then( res => console.log(res))

// 新增
// $.ajax({
// 	type: 'post',
//     url: domain + '/news',
//     data: {
// 		"id": 5,
// 		"title": "kdkdd 狂顶狂顶克莱斯勒的",
// 		"date": "2017-02-23",
// 		"likes": 10,
// 		"views": 20
//     }
// }).then( res => console.log(res))

// 新增+查询 
// $.post(domain + '/news',{
// 		"id": 6,
// 		"title": "这又是一个新的post请求",
// 		"date": "2017-12-14",
// 		"likes": 215,
// 		"views": 301
// })
// .then((res)=>{
// 	return $.get('http://localhost:3003/news')
// },(err)=>console.log('新增失败'))
// .then((data)=>console.log(data),(err)=>console.log('获取数据失败'))

// 更新
// $.ajax({
// 	url: domain + '/news/3',
// 	// method:'PUT',
// 	type:'PUT',
// 	data:{
// 		"id":"3",
// 		"title": "曹县宣布昨日晚间登日失败",
// 		"date": "2016-09-12",
// 		"likes": 222,
// 		"views": 1006
// 	}
// })
// .then(res=>console.log(res),err=>console.log(err))

// 删除
// $.ajax({
// 	url : domain + '/news/5',
// 	method : 'DELETE'
// }).then(res=>console.log(res), err=>console.log('删除失败'))

// PATCH 请求是对 PUT 的补充，用于数据项的局部更新
// $.ajax({
// 	url:domain + '/news/1',
// 	method:'PATCH',
// 	data:{title:'地对地导弹顶顶顶'}
// }).then(res => console.log(res), err => console.log('局部更新'))
 
// 获取 news 中 id 为 1 或 2 的 文章
// $.ajax({
// 	url:domain + '/news?id=1&id=2'
// }).then(res=>console.log(res))

// 获取 news 中 views 属性值为 1006 的文章
// $.ajax({
// 	url : domain + '/news?views=1006'
// }).then(res => console.log(res))

// 获取 news 中 views 属性值为 1006  并且 likes 属性值为 25 的文章
// $.ajax({
// 	url : domain + '/news?views=1006&likes=222'
// }).then(res => console.log(res))
 
// 分页（Paginate）
// 可使用参数 _page 和 _limit(可选)，来返回分页数据。不用 _limit 时，默认返回 10 条。
// $.ajax({
// 	url:domain + '/news?_page=3&_limit=2'
// }).then(res=>console.log(res))
 
/*
截取（Slice）
Slice 截取的规则和数组中的 slice 方法相同。可使用参数 _start、_end 以及 _limit ，来返回截取数据。
http://localhost:3000/posts?_start=1&_end=3
获取 posts 中第2条到第3条的数据（db.json 中 posts 的第2、3条）
http://localhost:3000/posts?_start=2&_end=4
获取 posts 中第3条到第4条的数据（db.json 中 posts 的第3、4条）
http://localhost:3000/posts?_start=2&_limit=2
从第二条开始，获取 posts 中 后2条数据（db.json 中 posts 的第3、4条）
包括 _start 的文章，但不包括 _end 的文章。可以把 _start 和 _end 看成数组项的索引值
 */
// $.ajax({
// 	url:domain + '/news?_start=2&_limit=2'
// }).then(res=>console.log(res))

/*
分类排序（Sort）
可使用参数 _sort 和 _order，来返回排序的数据。

http://localhost:3000/posts?_sort=likes&_order=asc
获取 posts 中按 likes 数升序的数据（db.json 中 posts 的 id 排序依次为 4、5、2、1、3）
http://localhost:3000/posts?_sort=likes&_order=desc
获取 posts 中按 likes 数降序的数据（db.json 中 posts 的 id 排序依次为 3、1、2、5、4）
 */
// $.ajax({
// 	url:domain + '/news?_sort=date&_order=asc'
// }).then(res=>console.log(res))

/*
运算（Operators）
可使用参数 _gte 和 _lte，来返回一个范围的数据。

http://localhost:3000/posts?likes_gte=100&likes_lte=1000
获取 posts 中 likes 数大于等于100、且小于等于1000的数据（db.json 中 posts 的第1、2、5条）
可使用参数 _ne，来返回除指定之外的数据。

http://localhost:3000/posts?author.name_ne=lucy
获取 posts 中除 author.name 为 lucy 的数据（db.json 中 posts 的第1、2、5条）
 */
// $.ajax({
// 	url:domain + '/news?likes_gte=100&likes_lte=1000'
// }).then(res=>console.log(res))

// $.ajax({
// 	url:domain + '/news?date_ne=2016-08-12'
// }).then(res=>console.log(res))

/*
全文搜索（Full-text search）
可使用参数 q，来返回包含指定字符的数据。它会匹配每项数据的所有字段。

http://localhost:3000/posts?q=ttt
获取 posts 中字段值包含 ttt 的数据（db.json 中 posts 的第2条）
关联（Relationships）
可使用参数 _embed，将关联子数据拼接起来。

http://localhost:3000/posts/1?_embed=comments
获取 posts 中 id 为 1 的数据，并将它对应的 comments 数据拼接起来
返回数据为：
 */
// $.ajax({
// 	url:domain + '/news?q=post请求'
// }).then(res=>console.log(res))
$.ajax({
	// url:domain + '/posts/1?_embed=comments'
	url:domain + '/comments/1?_expand=post'
}).then(res=>console.log(res))
</script>
</body>
</html>